/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
 @import "~@app/uiTheme/less/color-schema.less";
 @import "~@app/uiTheme/less/variables.less";
 @import "~@app/uiTheme/less/commonModifiers.less";
 
:global {
  .--bgColor {
    &-header {
      background-color: @CELL_EXPANSION_HEADER;
    }

    &-highlight {
      background-color: @PALE_ORANGE;
    }
 
    &-white {
      background-color: @WHITE
    }
 
    &-transparent {
      background-color: transparent !important;
    }
 
    // advanced enabled light row
    &-advEnLight {
      background-color: @ACTIVE_ADVANCED_LIGHT_ROW;
    }

    // advanced enabled dark row
    &-advEnDark {
      background-color: @ACTIVE_ADVANCED_DARK_ROW;
    }

    // advanced disabled light row
    &-advDisLight {
      background-color: @DISABLED_ADVANCED_LIGHT_ROW;
    }

    // advanced disabled dark row
    &-advDisDark {
      background-color: @DISABLED_ADVANCED_DARK_ROW
    }

    &-advEnDrag {
      background-color: @ACTIVE_DRAG_AREA_BACKGROUND_COLOR;
    }

    &-advDisDrag {
      background-color: @DISABLED_DRAG_AREA_BACKGROUND_COLOR;
    }
  }
 
  // border color and width
  .--bColor {
    // set border color for every side: b-col-full
    &-full {
      border: 1px solid @BORDER_TABLE;
    }

    each(@directions, .(@direction-val) {
      // set border color for specific side: b-col-@{direction-key}
      &-@{direction-val} {
        border-@{direction-val}: 1px solid @BORDER_TABLE;
      }
    })
  }
 
  .AccelerationAdvanced {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &__tabs {
      display: flex;
      align-items: center;
      height: @row-height;
      width: 100%;
      margin-bottom: 5px;
    }

    &__tab {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: @TEXT_COLOR;
      display: flex;
      align-content: center;
      height: 25px;
      padding: 5px;
      margin-right: 10px;
    
      &:hover {
        background-color: @CELL_EXPANSION_HEADER !important;
        cursor: pointer;
      }
    }
  }
   
  .AccelerationAggregate {
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;

    &__AggregateForm {
      flex-flow: column nowrap !important;
      flex-grow: 1;
      padding: 10px 10px 0;
    }

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: @row-min-height;
      background-color: @CELL_EXPANSION_HEADER;
      padding: 3px;
    }

    &__toggle {
      width: auto;
      padding-left: 10px
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
      margin-left: -10px;
    }

    &__layout {
      float: right;
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: rgb(153, 153, 153);
      padding: 0 5px;
      display: flex;
      align-items: center;
    }
   }
   
  .AccelerationAggregation {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 40px;
      background-color: @CELL_EXPANSION_HEADER;
      border-top: 1px solid @BORDER_TABLE;
      border-left: 1px solid @BORDER_TABLE;
      border-right: 1px solid @BORDER_TABLE;
      padding: 3px;
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
    }
  }

  .AccelerationGridController {
    display: flex;
    flex-grow: 1;

    &__cell {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: @TEXT_COLOR;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      margin-left: 10px;
      border-right: 1px solid @BORDER_TABLE;
      border-left: 1px solid @BORDER_TABLE;
    }
  }

  .AccelerationGridSubCell {
    &__subCell {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      border-right: 1px solid @BORDER_TABLE;
    }

    &__lastSubCell {
      // &:extend(.AccelerationGridSubCell__subCell); DX-34369: why isn't extend working?
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      border-right: 1px solid @BORDER_TABLE;
      border-right: 0
    }

    &__subVal {
      display: flex;
      flex-grow: 1;
      justify-content: center;
    }

    &__subValClickable {
      // &:extend(.AccelerationGridSubCell_subVal); DX-34369: why isn't extend working?
      display: flex;
      flex-grow: 1;
      justify-content: center;
      border-left: 1px solid @BORDER_TABLE;
    }
  }
 
  .AccelerationRaw {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: @row-min-height;
      background-color: @CELL_EXPANSION_HEADER;
      border-top: 1px solid @BORDER_TABLE;
      border-left: 1px solid @BORDER_TABLE;
      border-right: 1px solid @BORDER_TABLE;
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
    }
  }

  .AccelerationBasic {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    &__AccelerationAggregate {
      background-color: @CELL_EXPANSION_HEADER;
      border: 1px solid @BORDER_TABLE;
    }

    &__header {
      background-color: @CELL_EXPANSION_HEADER;
      border: 1px solid @BORDER_TABLE;
      margin-bottom: 15px;
    }

    &__message {
      z-index: 1000;
    }

 

    &__toggle {
      width: auto;
      padding-left: 10px
    }

    &__toggleLayout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: @row-min-height;
      background-color: @CELL_EXPANSION_HEADER;
      padding: 3px;
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
      margin-left: -10px
    }
  }

  .CellPopover {
    &__columnWrap {
      margin-top: 10px;
    }

    &__column {
      display: flex;
      height: 20px;
      align-items: center;
      border: 1px solid @ACTIVE_COLUMN_BORDER;
      background-color: @ACTIVE_COLUMN_BACKGROUND_COLOR;
    }

    &__disabledColumn {
      // &:extend(CellPopover__column)
      display: flex;
      height: 20px;
      align-items: center;
      border: 1px solid @DISABLED_COLUMN_BORDER;
      background-color: @DISABLED_COLUMN_BACKGROUND_COLOR;
    }

    &__columnIndex {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: @TEXT_COLOR;
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: @ACTIVE_COLUMN_INDEX_BACKGROUND_COLOR;
      height: 100%
    }

    &__disabledColumnIndex {
      // &:extend(.CellPopover__columnIndex)
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: @DISABLED_COLUMN_INDEX_BACKGROUND_COLOR;
      height: 100%;
      color: @DISABLED_COLUMN_INDEX_TEXT_COLOR
    }

    &__menuHeader {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: @TEXT_COLOR;
      display: flex;
      align-items: center;
      height: 32px;
    }

    &__measureMenuItem {
      margin-top: 5px
    }
  }

  .AccelerationForm {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    overflow: hidden;

    &__formBody {
    height: 100%;
    display: flex;
    flex-direction: column;
    }

    &__extraError {
      margin-bottom: 0;
    }
  }

  .LayoutInfo {
    &__main {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13;
      color: @font-color2;
      padding: 0 5px;
      display: flex;
      align-items: center;
    }

    &__message {
      text-align: center;
      flex: 1;
      padding: 0 5px;
    }

    &__status {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }

  .ValidityIndicator {
    height: 20px;
    flex: 0 0 24px;
    text-align: center
  }
}
 
 